<link type="text/css" rel="stylesheet" href="${basePath}plugins/zTree/3.5.1/zTreeStyle/zTreeStyle.css"/>
<script type="text/javascript" src="${basePath}plugins/zTree/3.5.1/jquery.ztree.core.js"></script>
<script type="text/javascript" src="${basePath}plugins/zTree/3.5.1/jquery.ztree.excheck.js"></script>
<@shiro.hasPermission name="jigoutianjia">
<div class="layui-form-item layui-form-item-top">
    <button class="layui-btn-tan" id="addType">
        <i class="layui-icon">&#xe608;</i> 添加
    </button>
</div>
</@shiro.hasPermission>
<input type="button" value="修改" onclick="replaces();" class="layui-btn layui-btn-red"/>
<input type="button" value="删除" onclick="delets();" class="layui-btn layui-btn-red"/>


<div id="parentDiv" class="layui-elem-field" style="overflow: auto;width: 40%;float: left;height: 465px;margin-left: 16px;">
    <ul id="tree" class="ztree" style="padding: 5px;"></ul>
</div>
<div id="parentDivR" class="layui-elem-field" style="display: none;overflow: auto;width: 40%;float: left;height: 465px;margin-left: 16px;">
    <ul id="treeR" class="ztree" style="padding: 5px;"></ul>
</div>
<div id="bodys" style="display: none">
    <form class="layui-form" modelAttribute="dept" name="form1" id="form1"  method="post" style="float: left;">

        <div class="layui-form-item-dept">

            <div class="layui-form-item">
                <label class="layui-form-label"><span style="color: red;">*</span>部门名称：</label>
                <div class="layui-input-inline">
                    <input class="layui-input" type="text" name="deptName" maxlength="50" id="deptName" placeholder="这里输入部门名称" value="${dept.deptName}"  title="部门名称"/>
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">上级部门：</label>
                <div class="layui-input-inline">
                    <input class="layui-input" type="hidden" name="parentId" id="parentId" placeholder="上级部门" value="${dept.parentId}"  title="上级部门"/>
                    <input class="layui-input" type="text" readonly name="parentName" id="parentName" placeholder="上级部门" value="${dept.parentName}"  title="上级部门"/>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">备注：</label>
                    <div class="layui-input-inline">
                        <input class="layui-input" maxlength="200" type="text" name="remarks" id="remarks" placeholder="这里输入备注" value="${dept.remarks}"  title="备注"/>
                    </div>
                </div>
                <input class="layui-input" type="hidden" name="deptId" id="deptId"  value="${dept.deptId
			}"/>
                <input type="button" value="保存" onclick="YES();" class="layui-btn layui-btn-red"/>
                <input type="button" value="取消" onclick="NO();" class="layui-btn layui-btn-red"/>

            </div>
        </div>
    </form>
</div>
<script type="text/javascript">
    var zTree;
    var zTreeR;
    $(document).ready(function(){
        var id =parseInt($("#deptId").val());
        if(!isNaN(id)){
            $("#deptId").attr("readonly",true );
        }
//        $("#parentName").click(function(event){
//            if($("#deptId").val()== ''){
//                $("#parentDiv").show();
//                event.stopPropagation();//阻止冒泡
//            }
//        });
        $('#parentDiv').click(function(){
            return false;
        });
        var zn = '<#noescape>${zTreeNodes}</#noescape>';
        var setting = {
            data: {
                key: {
                    title: "dept"
                },
                simpleData: {
                    enable: true,
                    idKey: "id",
                    pIdKey: "pId",
                    rootPId: 0
                }
            }
        };
        var setting1 = {
            check: {
                enable: true,
                chkStyle: "radio",
                radioType: "all"
            },
            data: {
                key: {
                    title: "dept"
                },
                simpleData: {
                    enable: true,
                    idKey: "id",
                    pIdKey: "pId",
                    rootPId: 0
                }
            },
            callback:{
                onClick: zTreeOnClick
            }
        };
        var zNodes = eval(zn);
        zTree = $.fn.zTree.init($("#tree"), setting, zNodes);
        zTreeR = $.fn.zTree.init($("#treeR"), setting1, zNodes);
    });
    function zTreeOnClick(event, treeId, treeNode) {
        $("#parentId").val(checkedNodes.id);
        $("#parentName").val(checkedNodes.name);
    }
    $("#addType").click(function(){
        if($("#bodys").is(":hidden")){
            $("#bodys").show()
            $("#parentDiv").hide();
            $("#parentDivR").show()
        }else {
            $("#bodys").hide();
            $("#parentDivR").hide();
            $("#parentDiv").show()
        }
    })

</script>

